<template>
  <div class="list-item" :class="{ border }" @click="$emit('click')">
    <div class="avatar-wrap" :style="{width: avatarSize, height: avatarSize}">
      <slot v-if="$slots.avatar" name="avatar"></slot>
      <img v-else-if="avatar" class="avatar" :src="avatar" :style="{width: avatarSize, height: avatarSize}" />
    </div>
    <div class="item-content-wrap">
      <div class="title-wrap">
        <slot v-if="$slots.title" name="title"></slot>
        <span v-else-if="title" class="title">{{ title }}</span>
      </div>
      <div class="content-wrap">
        <slot v-if="$slots.content" name="content"></slot>
        <span v-else-if="content" class="content">{{ content }}</span>
      </div>
      <div class="desc-wrap">
        <slot v-if="$slots.desc" name="desc"></slot>
        <span v-else-if="desc" class="desc">{{ desc }}</span>
      </div>
    </div>
    <div class="item-actions-wrap">
      <slot v-if="$slots.actions" name="actions"></slot>
      <template v-else-if="actions.length > 0">
        <a-button v-bind="action" v-for="action in actions"></a-button>
      </template>
    </div>
    <div class="item-next-icon" v-if="nextIcon">
      <img :src="iconNext" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ButtonProps } from 'ant-design-vue';
import { toRefs, useSlots } from 'vue';

import iconNext from '@/assets/list-item-next.svg'

const props = defineProps({
  title: { type: String },
  content: {type: String},
  desc: { type: String },
  avatar: { type: String },
  avatarSize: { type: [Number, String], default: '24px' },
  actions: { type: Array<ButtonProps>, default: ()=> [] },
  border: { type: Boolean },
  nextIcon: { type: Boolean },
})

const { title, content, desc, avatar, actions, nextIcon, border } = toRefs(props)

const $slots = useSlots()

</script>

<style lang="less" scoped>
.list-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-color: white;
  padding: 5px 0;
  color: #505050;
  cursor: pointer;

  .item-content-wrap {
    flex: 1;
  }

  &.border {
    border-bottom: 1px solid #ddd;
  }

  .avatar-wrap {
    margin: 0 10px;
  }

  .item-next-icon {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
</style>
